/* 
useEffect钩子函数
用于react组件中创建不是由事件引起而是由渲染本身引起的操作  比如发送ajax请求 更改dom
参数：
第一个参数是回调函数
第二个参数可选， 
  若没有参数 初始渲染 + 组件更新时执行
  若为空数组 只有初始渲染
  特定参数 初始渲染 + 特定依赖项变化时执行


需求 在组建渲染完成后 立刻从服务端拿到数据渲染到列表上
*/

import { useEffect, useState } from "react";

const url = "http://geek.itheima.net/v1_0/channels";
function App() {
	const [list, setList] = useState([]);

	useEffect(() => {
		// 第一个参数是回调函数 额外的操作  获取频道列表
		const getList = async () => {
			const res = await fetch(url);
			const list = await res.json();
			console.log(list);
			setList(list.data.channels);
		}; 
		getList();
	}, []); 
  // 第二个参数可选， 
  // 若没有参数 初始渲染 + 组件更新时执行
  // 若为空数组 只有初始渲染
  // 特定参数 初始渲染 + 特定依赖项变化时执行

	return (
		<div className="app">
			<ul>
				{list.map(item => (
					<li key={item.id}>{item.name} </li>
				))}
			</ul>
		</div>
	);
}

export default App;
